<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hichem Med Photography</title>
  <link href="https://fonts.googleapis.com/css?family=Poiret+One|Roboto" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <!-- header -->
  <header id="header">

    <nav>
      <ul>
        <li class="logo"><a href="#">HM Photography</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </header>

  <!-- intro -->
  <section id="intro">
    <h1>Hichem Med Photograpy</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit at debitis nostrum, quis, officiis beatae corporis
      deleniti expedita dolorem sapiente ab delectus nihil temporibus molestias! Reiciendis ut temporibus ipsum iste.</p>
  </section>

  <!-- aside -->
  <aside id="aside">
    <h2>Categories</h2>
    <nav>
      <ul>
        <li><a href="">People</a></li>
        <li><a href="">Nature</a></li>
        <li><a href="">House</a></li>
        <li><a href="">Business</a></li>
      </ul>
    </nav>

  </aside>

  <!-- gallery -->
  <section id="gallery">
    <h2>Gallery</h2>
    <div class="gallery-container">
      <div class="img-container"><img src="img/business1.jpg" alt=""></div>
      <div class="img-container"><img src="img/home1.jpg" alt=""></div>
      <div class="img-container"><img src="img/nature1.jpg" alt=""></div>
      <div class="img-container"><img src="img/people1.jpg" alt=""></div>
    </div>
  </section>

  <!-- services -->
  <section id="services">
    <h2>Services</h2>
    <div class="services-container">

      <div class="service">
        <div class="img-container">
          <img src="img/people2.jpg" alt="">
        </div>
        <h5>People</h5>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sed blanditiis impedit dolor reprehenderit
          perspiciatis. Ad temporibus debitis enim soluta quasi tempore. In magni consequuntur ut. Ipsum officia libero aut.</p>
        <a href="#" class="call-to-action">
          Read more
        </a>
      </div>

      <div class="service">
        <div class="img-container">
          <img src="img/business3.jpg" alt="">
        </div>
        <h5>Business</h5>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sed blanditiis impedit dolor reprehenderit
          perspiciatis. Ad temporibus debitis enim soluta quasi tempore. In magni consequuntur ut. Ipsum officia libero aut.</p>
        <a href="#" class="call-to-action">
          Read more
        </a>
      </div>

      <div class="service">
        <div class="img-container">
          <img src="img/home2.jpg" alt="">
        </div>
        <h5>Home</h5>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sed blanditiis impedit dolor reprehenderit
          perspiciatis. Ad temporibus debitis enim soluta quasi tempore. In magni consequuntur ut. Ipsum officia libero aut.</p>
        <a href="#" class="call-to-action">
          Read more
        </a>
      </div>

      <div class="service">
        <div class="img-container">
          <img src="img/nature2.jpg" alt="">
        </div>
        <h5>Nature</h5>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sed blanditiis impedit dolor reprehenderit
          perspiciatis. Ad temporibus debitis enim soluta quasi tempore. In magni consequuntur ut. Ipsum officia libero aut.</p>
        <a href="#" class="call-to-action">
          Read more
        </a>
      </div>

    </div>

  </section>

  <!-- about -->
  <section id="about">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis sed provident quas veritatis voluptatem incidunt vitae.
      Animi, nesciunt explicabo quibusdam maiores fugit vero nam porro facere soluta, expedita eaque. Non.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum veniam voluptates animi necessitatibus corporis tempore
      inventore. Error vel atque culpa quidem sit possimus eligendi, neque est quasi accusamus, reprehenderit fugiat!</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere nisi quis nihil minus consequuntur rerum non natus.
      Temporibus aperiam eum suscipit voluptates dignissimos distinctio praesentium dolorem asperiores aliquid, iusto numquam.</p>
  </section>

  <!-- contact -->
  <section id="contact">
    <h2>Contact</h2>
    <form action="">
      <label for="name">Name:</label>
      <input type="text" id="name">

      <label for="email">Email:</label>
      <input type="email" id="email">

      <label for="message">Message:</label>
      <textarea name="message" id="message"></textarea>

    </form>

  </section>

  <!-- footer -->
  <footer id="footer">
    <p>Made with &hearts; by Hichem Med</p>
  </footer>



</body>

</html>